<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>

		<view v-show="!loadingone">
			<navbar name="对比详情"></navbar>
			<view class="contrast">
				<view class="materials-title">
				</view>
				<view class="materials-title2">
					提交时间：2021.03.29
					<view class="abnormal">
						<view style="float: left;">
							只看异常
						</view><switch checked style="transform:scale(0.7);position: relative;top:-14upx"  color="#2EA7E0" />
					</view>
				</view>
				<!-- end -->
				<block v-for="(item,idx) in basic" :key="idx">
					<view class="weui-flex materia">
						<view class="flex-title">
							{{item.tl}}
						</view>
						<view class="flex-num">
							<text style="padding-right: 10upx;" :style="item.trred1?'color:red':''">{{item.tr1}}</text><text>{{item.tr2}}</text>
						</view>
					</view>
					<u-line v-show="basic.length -1!=idx" />
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"

	export default {
		components: {
			uLoading,
			uLine,
		},
		data() {
			return {
				loadingone:false,//懒加载
				basic: [{
						tl: '低压',
						tr1: '105mmHg',
						tr2:'85mmHg',
						trred1:true,
						trred2:false,
					},
					{
						tl: '性别',
						tr: '女',
						tr1: '105mmHg',
						tr2:'85mmHg',
						trred1:true,
						trred2:false,
					},
					{
						tl: '姓名',
						tr: '米卡',
						tr1: '105mmHg',
						tr2:'85mmHg',
						trred1:true,
						trred2:false,
					},
					{
						tl: '姓名',
						tr: '米卡',
						tr1: '105mmHg',
						tr2:'85mmHg',
						trred1:true,
						trred2:false,
					},
					{
						tl: '姓名',
						tr: '米卡',
						tr1: '105mmHg',
						tr2:'85mmHg',
						trred1:true,
						trred2:false,
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.contrast{
		width: 702upx;
		margin: 30upx auto 0;
		background: #fff;
		border-radius: 20upx;
	}
	.materials-title {
		height: 90upx;
		line-height: 90upx;
		padding: 0 20upx;
		background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
		opacity: 0.23;
		border-radius: 25upx 25upx 0 0;
	}

	.materials-title2 {
		height: 40upx;
		line-height: 40upx;
		transform: translateY(-60upx);
		color: #2EA7E0;
		padding-left: 20upx;
		margin-bottom: -40upx;
	}

	.materia {
		height: 90upx;
		padding: 0 20upx;
		line-height: 90upx;

		.flex-title {
			width: 50%;
			font-size: 34upx;
			font-weight: 400;
			color: #333333;
		}

		.flex-num {
			width: 49%;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			text-align: right;
		}
	}
	.abnormal{
		float: right;
	}
</style>
